<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>地图标注</title>
    <link rel="stylesheet" href="assets/js/mapmarker/jquery.mapmarker.css">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="assets/js/mapmarker/jquery.mapmarker.js"></script>
</head>
<style>
    body{padding:0;margin:0;}
    .mapmarker-container .save{position: fixed; z-index:1; background: url("assets/js/mapmarker/img/icon_ok.png") no-repeat left top;width:30px;height:30px;background-size:30px 30px;top:10px;left:115px;cursor: pointer;-webkit-box-shadow: 2px 2px 4px 2px #CFCFCF; box-shadow: 2px 2px 4px 2px #CFCFCF;-webkit-border-radius: 15px 15px 15px 15px;border-radius: 15px 15px 15px 15px;}
</style>
    <div class="mapmarker-container">
        <div class="map" map-url="assets/images/map2.png" style="background: url('assets/images/map2.png') no-repeat left top;">&nbsp;
        </div>
        <div class="save" title="保存">&nbsp;</div>
    </div>
    <script type="text/javascript">
        //当前可移动坐标点
        var curitem = {id:19842119881221, name: '移动位置', locate: '0.1,0.1', move:true};
        $(function(){
            var spots = [
                {id: 1,name: '皇后玉溪', locate: '0.5, 0.5,', move: false},
                {id: 2,name: '鸟盖瓠壶', locate: '0.2, 0.2', move: false},
                {id: 3,name: '黄还是那', locate: '0.2, 0.3', move: false},
                {id: 4,name: '二三个', locate: '0.5, 0.2', move: false}
            ];
            spots.push(curitem);

            $(".mapmarker-container").mapMarker({
                containerWidth:850,
                containerHeight:700,
                maxMapHeight:3000,
                stepFator: 0.1,
                zoom: true,
                spotArray: spots,
                zoomMWheel: false,
                moveStop: function(item){
                    curitem = item;
                    console.log(curitem.locate);
                }
            });

            $(".mapmarker-container .save").click(function () {
                console.log(curitem.locate);
                alert('已设置位置' + curitem.locate);
            });
        });
    </script>
</body>
</html>